<template>
  <div>
    <h1>子路由</h1>
    <h1>子路由的name:{{ routeName }}</h1>
    <RouterLink
      :to="{ path: `/parent/${id}/child/${routeName}/grandchild/${code}` }"
      >grandchild</RouterLink
    >
    <br />
    传递的code: <input type="text" v-model="code" />
    <div style="background-color: aquamarine; width: 300px; height: 200px">
      <br />
      <RouterView />
    </div>
  </div>
</template>
<script setup>
  import { ref } from "vue";
  import { useRoute } from "vue-router";

  const route = useRoute();
  const code = ref(route.params.code || 666);
  const routeName = ref(route.params.name);
  const id = ref(route.params.id);
</script>
